import {useState,useEffect} from 'react'
// import {useLocation,useNavigate,Outlet} from 'react-router-dom'
import axios from 'axios'
import { Flex , Input , Select , DatePicker , Button , Tabs,Modal,Timeline,Space } from 'antd';

let main = {
  width:'100%',
  height:'600px',
  borderRadius: 6,
  // border:'1px solid blue',
}
let top = {
  width:'100%',
  height:'10%',
  borderRadius: 6,
  // border:'1px solid blue',
}
let bottom = {
  width:'100%',
  height:'90%',
  borderRadius: 6,
  // border:'1px solid blue',
}
let left = {
  width:'20%',
  height:'100%',
  borderRadius: 6,
  // border:'1px solid blue',
}
let right = {
  width:'80%',
  height:'100%',
  borderRadius: 6,
  // border:'1px solid blue',
}
const rightp1 = {
  width: '20%',
  height: '80%',
  borderRadius: 6,
  fontSize:'12px',
  color:'gray',
  // border:'1px solid red',
}
const rightp2 = {
  width: '50%',
  height: '80%',
  borderRadius: 6,
  fontSize:'12px',
  color:'gray',
  // border:'1px solid red',
}
let hili = {
  width:'100%'
}

let dociss = {
  width:'100%',
  height:'100%',
  borderRadius: 6,
  border:'1px solid green',
}
const initialItems = [
  {label: '病历文书', children: '11', key: '1' },
  {label: '处方', children: '22', key: '2' },
  {label: '检查',children: '33',key: '3'},
  {label: '检验',children: '44',key: '3'},
];



export default function History(){

  let [list,setlist] = useState([])
  let [item,setitem] = useState([
    {
      label:'2000-11-11',
      children: <div>aaa1</div>,
    },
    {
      label:'2000-11-12',
      children: <div>aaa2</div>,
    },
    {
      label:'2000-11-13',
      children: <div>aaa3</div>,
    }
    
  ])

  let btn = (code:any)=>{
    alert(code)
  }

    //弹出框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const btnadddrug = () => {
        setIsModalOpen(true);
    };
    const handleCancel = () => {
      setIsModalOpen(false);
    };

        //tab栏
        const [size, setSize] = useState<'small' | 'middle' | 'large'>('small');
        const [items, setItems] = useState(initialItems);
        const [activeKey, setActiveKey] = useState(initialItems[0].key);
    
        const onChange = (newActiveKey: string) => {
            setActiveKey(newActiveKey);
            console.log(newActiveKey)
        };

  useEffect(()=>{

  },[])

  return (
    <>
        <Modal title="患者病史" footer={null}  open={isModalOpen}  onCancel={handleCancel} width={1200} >
            <Flex wrap justify='space-around' align='center' style={main}>
                <Flex  justify='space-around' align='center' style={top}>
                      <Flex wrap gap="middle" style={rightp1}>
                            <div>
                                <span>小明</span>
                                <span>男</span>
                                <span>20岁</span>
                            </div>
                            <div>门诊号：20001102</div>
                        </Flex>
                        <Flex wrap gap="middle" style={rightp2}>
                            <span>联系电话：12444444444</span>
                            <span>证件号：1011777777777</span>
                            <span>就诊卡号：932222222222</span>
                            <span>患者性质：医保</span>
                            <span>就诊时间：2000-09-01 8:00-9:00</span>
                        </Flex>
                </Flex>
                <Flex  justify='space-around' align='center' style={bottom}>
                    <Flex wrap justify='space-around' align='center' style={left}>
                        <Timeline mode={'left'} style={hili} items={item}/>
                    </Flex>
                    <Flex wrap justify='space-around' align='center' style={right}>
                        <Tabs
                            defaultActiveKey="1"
                            onChange={onChange}
                            // activeKey={activeKey}
                            type="card"
                            size={size}
                            style={dociss}
                            items={items}
                        />
                    </Flex>
                </Flex>
                
            </Flex>
        </Modal>
        <button onClick={()=>{btnadddrug()}}>add</button>

    </>
  )
}